<template>
  <div class="app-container">
    <div class="head">
      <img src="@/assets/img/Layout/position.png" />
      <p class="see-block">大码详情</p>
    </div>
    <div class="view-container">
      <el-row class="status-title">
        <el-col class="mr20 width100" v-if="detailData.status == '1'">
            <el-button
                class="btn-success width100"
                type="primary"
                v-hasPermi="['system:productPalletCodeBindingRelationship:deterMine']"
                @click="submitForm()"
            >确定绑定</el-button>
        </el-col>
      </el-row>
      <el-row class="detail-item">
          <el-col :span="12">
              <span>生产计划编码：</span>{{ detailData.productPlan.planCode ? detailData.productPlan.planCode : '暂无' }}
          </el-col>
      </el-row>
      <el-row class="detail-item">
        <el-col :span="12">
              <span>产品名称：</span>{{ detailData.productPlan.productBasicName ? detailData.productPlan.productBasicName : '暂无' }}
          </el-col>
      </el-row>
      <el-row class="detail-item">
        <el-col :span="12">
              <span>规格名称：</span>{{ detailData.productPlan.productName ? detailData.productPlan.productName : '暂无' }}
          </el-col>
      </el-row>
      <el-row class="detail-item">
        <el-col :span="12">
            <span>产品批号：</span>{{ detailData.batchNumber ? detailData.batchNumber : '暂无' }}
        </el-col>
      </el-row>
      <el-row class="detail-item">
        <el-col :span="12">
            <span>大码规格：</span>{{ detailData.specs ? detailData.specs : '暂无' }}
        </el-col>
      </el-row>
      <el-row class="detail-item">
        <el-col :span="12">
            <span>大码数量：</span>{{ detailData.palletCodeNum }}
        </el-col>
      </el-row>
      <el-row class="detail-item">
        <el-col :span="12">
            <span>母码数量：</span>{{ detailData.motherCodeNum }}
        </el-col>
      </el-row>
      <el-row class="detail-item">
        <el-col :span="12">
            <span>子码数量：</span>{{ detailData.subcodeNum }}
        </el-col>
      </el-row>
      <el-row class="detail-item">
          <el-col :span="12">
            <span>备注：</span>{{ detailData.remark ? detailData.remark : '暂无' }}
          </el-col>
      </el-row>
      <el-row class="detail-item">
        <el-col :span="12">
            <span>状态：</span>
            <font v-if="detailData.status == 0" style="color:#13C2C2;">待绑定</font>
            <font v-if="detailData.status == 1" style="color:#13C2C2">绑定中</font>
            <font v-if="detailData.status == 2" style="color:#52C41A">已完成</font>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { palletCodeConfirm, palletCodeDetail } from "@/api/system/palletCode/palletCode"
export default {
  name: "detail",
  data() {
    return {
      id: '',
      detailData: '',
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getDetailData()
  },
  methods: {
    // 获取详细信息
    getDetailData() {
      palletCodeDetail(this.id).then(res => {
        if(res.code == 200){
          this.detailData = res.data
        }
      })
    },
    /** 确定按钮 */
    submitForm() {
      this.$modal.confirm('是否确认绑定？').then(() => {
        this.$modal.loading("正在提交")
        palletCodeConfirm({id: this.id, status: 2 }).then(res => {
          if(res.code == 200){
            this.$modal.closeLoading()
            this.$tab.closeOpenPage({ path: "/palletCode/list" })
            this.$modal.msgSuccess("操作成功!")
          }
        })
      }).catch(() => {})
    }
  }
}
</script>
